// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
.charticulator__image-uploader {
  display: inline-block;
  min-width: 50px;
  flex: 1;

  .el-input,
  .el-dropzone {
    display: block;
    background: white;
    border: none;
    outline: none;
    margin: 0;
    padding: 0px;
    font-size: 14px;
    line-height: 24px;
    border: 1px dashed $gray-200;
    border-radius: 2px;
  }

  .el-image {
    max-width: 24px;
  }

  .el-input-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;

    .el-input {
      flex: 1 1;

      &:focus {
        border: 1px solid $color-primary;
      }
    }
    .charticulator__widget-control-button {
      padding: 0px 4px;
      margin-left: 2px;
    }
  }

  .el-dropzone {
    border: 2px solid $color-active;
    background: lighten($color-active, 30%);
    padding: 9px;
  }
}

.charticulator__image-chooser {
  margin: 10px;
}
